/* Bootstrap imports */
@import './bootstrap-variables.scss';
@import 'bootstrap/scss/bootstrap';

/* Bootstrap customizations */
.nav {
  // correct bug with menus
  flex-wrap: nowrap;
}
.nav-link {
  cursor: pointer;
  transition-property: color;
  transition-property: background-color;
  transition-duration: 150ms;
}
.nav-tabs {
  border-bottom: none;

  .nav-link {
    border: none;
    margin-bottom: 0;
  }
  .nav-link.active,
  .nav-item.show .nav-link {
    color: $gray-100;
    box-shadow: inset 0 -2px 0 0 $blue;
  }
}
.nav.flex-column {
  .nav-link .nav-link-subtitle {
    color: $gray-500;
    font-size: $sub-sup-font-size;
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    color: $gray-100;
    box-shadow: inset 2px 0 0 0 $blue;
    background-color: $component-active-bg;

    .nav-link-subtitle {
      color: $gray-100;
    }
  }
  .nav-link.route-disabled,
  .nav-item.show .nav-link {
    box-shadow: inset -2px 0 0 0 $red;
  }
  .nav-link.route-disabled.active,
  .nav-item.show .nav-link {
    box-shadow:
      inset -2px 0 0 0 $red,
      inset 2px 0 0 0 $blue;
  }
}

.form-label::after {
  cursor: pointer;
}

.modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 65vh;
}
.form-control {
  &:disabled,
  &[readonly] {
    color: $text-muted;
  }
}

.input-group-text {
  color: $gray-400;
}
label {
  color: $gray-400;
}

.badge {
  transition: none;

  &-hollow {
    border: 1px solid $gray-300;
  }
  &-custom {
    color: $gray-100;
    background-color: $component-active-bg;
  }
}

// remove bootstrap fix for badges in buttons (it's not working when using flex)
.btn .badge {
  position: initial;
  top: 0;
}

.btn.btn-icon {
  text-decoration: none;

  &:visited {
    text-decoration: none;
  }
  color: $gray-300;

  &:hover,
  &:active {
    color: $gray-100;
    text-decoration: none;
  }

  &.active {
    color: $gray-100;
    box-shadow: inset 0 -2px 0 0 $blue;
    border-radius: 0;
  }
  &:disabled,
  &.disabled {
    color: $gray-600;
    pointer-events: none;
  }
}

.btn.btn-link,
.btn.btn-icon {
  &:focus-visible {
    outline: 0;
    box-shadow: none;
  }
}

.btn-custom {
  @include button-variant(
    // bg color
    $custom-gray,
    // border color
    $custom-gray,
    // color
    $gray-200,
    // hover-background
    $custom-gray,
    // hover border
    $gray-800,
    // hover-color
    $gray-100,
    // active-background
    $custom-gray,
    // active-border
    $gray-800,
    // active-color
    $gray-100,
    // disabled-background
    $custom-gray,
    // disabled-border
    $custom-gray,
    // disabled-color
    $gray-500
  );
}

.btn-xs {
  // line-height: ensure proper height of button next to small input
  @include button-size(
    $input-btn-padding-y-xs,
    $input-btn-padding-x-xs,
    $font-size-xs,
    $btn-border-radius-xs
  );
}

.p-btn {
  padding: $input-btn-padding-y $input-btn-padding-x;
}

.mh0 {
  min-height: 0;
}

.mw0 {
  min-width: 0;
}

.dropdown {
  &-toggle {
    width: 100%;
    text-align: left;
    &:not(.dropdown-toggle-icon) {
      &::after {
        margin-left: -1em;
      }
    }

    .dropdown-toggle-label {
      display: inline-block;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: bottom;
      padding-right: 2em;
    }
  }

  &-menu {
    .dropdown-header {
      padding: 10px 10px 5px 10px;
    }
  }
}

a:not([href]):not([tabindex]) {
  color: $gray-400;
}
a.nav-link.disabled:not([href]):not([tabindex]) {
  color: $gray-600;
}
a:focus {
  outline: none;
}

.list-group:not(.list-group-flush) {
  .list-group-item {
    border-left: 0;
    border-right: 0;
  }
}
.list-group-item {
  outline: none;
}

// inline code
code {
  padding: 0.1rem 0.25rem;
  background-color: lighten($gray-900, 10%);
  border-radius: 0.25rem;
}

// code blocks (for release note)
pre {
  background-color: lighten($gray-900, 10%);
  padding: 1rem;
  border-radius: 0.5rem;

  code {
    background-color: transparent;
    padding: 0;
    border-radius: none;
  }
}

fieldset {
  border: 1px solid $gray-700;
  padding: 0.5rem;
  margin: 0;

  legend {
    color: $gray-800;
    float: none;
    width: auto;
    font-style: italic;
    padding: 0 0.5rem;
    margin: 0;
  }
}
